// components/comFireworks/index.js
let ctx = null
let queue = {}
let timer = 0
//控制气泡的数量
let fireworksNum = 6
let gif = {}
let firstGif = []
let timers = 0
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    flag2: {
      type: Boolean,
      value: false
    },
    count: {
      type: Number,
      observer: "likeChange",
      value: 0,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    //存放烟花播放的坐标点
    list: [],
    //气泡喷放的终点坐标
    pointPosition: [{ x: 260, y: 80 }, { x: 200, y: 120 }, { x: 410, y: 160 }, { x: 170, y: 150 }, { x: 220, y: 170 }, { x: 320, y: 150 }, { x: 250, y: 260 }, { x: 210, y: 370 }, { x: 460, y: 450 }, { x: 390, y: 260 }, { x: 270, y: 90 }, { x: 260, y: 150 }, { x: 190, y: 190 }, { x: 170, y: 260 }, { x: 110, y: 270 }, { x: 100, y: 450 }, { x: 380, y: 210 }, { x: 110, y: 150 }, { x: 460, y: 400 }, { x: 350, y: 50 }, { x: 320, y: 130 }, { x: 140, y: 230 }, { x: 150, y: 290 }, { x: 170, y: 300 }, { x: 130, y: 450 }, { x: 160, y: 450 }, { x: 380, y: 210 }, { x: 350, y: 150 }, { x: 460, y: 400 }, { x: 340, y: 250 }, { x: 290, y: 180 }, { x: 110, y: 120 }, { x: 100, y: 190 }, { x: 130, y: 130 }, { x: 240, y: 170 }, { x: 160, y: 450 }, { x: 360, y: 150 }, { x: 350, y: 100 }, { x: 460, y: 390 }, { x: 150, y: 380 }, { x: 200, y: 100 }, { x: 90, y: 130 }, { x: 220, y: 150 }, { x: 130, y: 130 }, { x: 200, y: 220 }, { x: 160, y: 290 }, { x: 400, y: 150 }, { x: 300, y: 150 }, { x: 460, y: 390 }, { x: 150, y: 460 }],
    num: 1
  },
  lifetimes: {
    attached: function () {
      //进入页面创建canvas
      ctx = wx.createCanvasContext('myCanvas', this)
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**点赞个数变化 */
    likeChange(newVal, oldVal) {
      if (newVal - oldVal > 0) {
        this.praiseClick();
      }
    },
    praiseClick() {
      for (let i = 0; i < fireworksNum; i++) {
        const image = "../../images/" + this.getRandomInt(1, 18) + ".png";
        const randomNum = this.getRandomInt(0, 50)
        let anmationData = {
          id: new Date().getTime() + i,
          timer: 0,
          pathData: this.generatePathData(randomNum),
          image: image,
          factor: {
            speed: 0.016, // 运动速度，值越小越慢
            t: 0 //  贝塞尔函数系数
          }
        };
        if (Object.keys(queue).length > 0) {
          queue[anmationData.id] = anmationData;
        } else {
          queue[anmationData.id] = anmationData;
          this.bubbleAnimate();
        }
      }
    },
    //获取三点坐标 p0为起始点  p1为控点  p2为终止点
    generatePathData(randomNum) {
      const p0 = {
        x: 310,
        y: 290
      };
      const p1 = {
        x: this.getRandomInt(310, this.data.pointPosition[randomNum].x),
        y: this.getRandomInt(290, this.data.pointPosition[randomNum].y)
      };
      const p2 = this.data.pointPosition[randomNum];
      return [p0, p1, p2];
    },
    //获取随机值
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
    },
    //实时图片路径
    getRoute(coordinate, seep) {
      let x1 = coordinate[0].x
      let y1 = coordinate[0].y
      let x2 = coordinate[1].x
      let y2 = coordinate[1].y
      let x3 = coordinate[2].x
      let y3 = coordinate[2].y
      //系数t
      let t = seep.t
      let x
      let y
      // if (t > 0.8) {
      //多项系数的计算（二阶贝塞尔曲线）
      x = ((1 - t) * (1 - t) * x1) + (2 * t * (1 - t) * x2) + (t * t * x3)
      y = ((1 - t) * (1 - t) * y1) + (2 * t * (1 - t) * y2) + (t * t * y3)
      // } else {
      //多项系数的计算 （一阶贝塞尔）
      // x = x2 * t + (1 - t) * x1
      // y = y2 * t + (1 - t) * y1
      // }
      return {
        x, y
      }
    },
    //调取画图
    bubbleAnimate() {
      Object.keys(queue).forEach(key => {
        const anmationData = queue[+key];
        //实时输出每一个气泡的坐标点
        const { x, y } = this.getRoute(anmationData.pathData, anmationData.factor);
        //气泡的速率
        const speed = anmationData.factor.speed;
        //每个气泡的系数
        anmationData.factor.t += speed;
        //控制气泡的大小
        let circleW = (Math.abs(anmationData.pathData[0].y - y) / 2 / Math.abs(anmationData.pathData[0].y - anmationData.pathData[2].y)) + 1
        //画图轨迹
        ctx.drawImage(anmationData.image, x, y, circleW * 23, circleW * 23);
        if (anmationData.factor.t > 1) {
          //获取结束礼花坐标
          let gif = this.data.list
          gif.push({ x, y })
          this.setData({ list: gif })
          // //触发fireworksNum次进行执行
          if (this.data.list.length % fireworksNum == 0) {
            // debugger
            setTimeout(() => {
              let deleList = this.data.list
              deleList.splice(0, fireworksNum)
              this.setData({ list: deleList })
            }, 140)
            // firstGif.forEach((item, index) => {
            //   let anmation = {
            //     id: new Date().getTime() + index,
            //     pathData: { x: item.x, y: item.y },
            //     timers: 0,
            //     factor: {
            //       num: 1,
            //       speed: 1
            //     }
            //   };
            //   if (Object.keys(gif).length > 0) {
            //     gif[anmation.id] = anmation;
            //   } else {
            //     gif[anmation.id] = anmation;
            //     this.tt()
            //   }
            // })
          }
          delete queue[anmationData.id];
        }
      });
      ctx.draw();
      if (Object.keys(queue).length > 0) {
        timer = setTimeout(() => {
          this.bubbleAnimate();
        }, 5);
      } else {
        setTimeout(() => {
          //结束时清空list礼花
          this.setData({ list: [] })
        }, 140)
        clearTimeout(timer);
        ctx.draw(); // 清空画面
      }
    },
    // tt() {
    //   console.log(gif);
    //   Object.keys(gif).forEach(key => {
    //     const anmation = gif[+key];
    //     // debugger
    //     //实时输出每一个气泡的坐标点
    //     const { x, y } = anmation.pathData
    //     let imageNum = "../../image4/" + anmation.factor.num + ".png"
    //     ctx.drawImage(imageNum, x, y, 123, 123);
    //     //气泡的速率
    //     const speed = anmation.factor.speed;
    //     //每个气泡的系数
    //     anmation.factor.num += speed;
    //     if (anmation.factor.num > 12) {
    //       firstGif.splice(0, fireworksNum)
    //       delete gif[anmation.id];
    //     }
    //   });
    //   ctx.draw();
    //   if (Object.keys(gif).length > 0) {
    //     timers = setTimeout(() => {
    //       this.tt();
    //     }, 30);
    //   } else {
    //     clearTimeout(timers);
    //     ctx.draw(); // 清空画面
    //   }
    // },
  },
  detached() {
    if (timer) {
      clearInterval(timer);
    }
  }
})
